<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <a-card :bordered="false" :body-style="{ padding : '0' }">
        <a-layout style="background-color: white;">
            <!-- 部门管理 -->
            <a-layout-sider width="256" theme="light" style="padding-left: 32px;padding-bottom: 24px;">
                <sys-dept-manage />
            </a-layout-sider>
            <!-- 用户管理 -->
            <a-layout-content>
                <ant-standard-table ref="tableRef" :api="pagingQuerySysUser">
                    <!-- 表头操作按钮 -->
                    <template v-slot:headerOperators="" >
                        <a-button icon="plus" type="primary" @click="$router.push({ name : 'addSysUser' }).then()">新增</a-button>
                    </template>

                    <!-- 表格列 -->
                    <template v-slot:tableColumns="">
                        <a-table-column title="头像" :align="'center'" width="65">
                            <template slot-scope="record">
                                <a-avatar slot="avatar" :src="record['userPortrait']" />
                            </template>
                        </a-table-column>
                        <a-table-column title="用户名" dataIndex="username" :align="'center'"  />
                        <a-table-column title="部门名称" dataIndex="deptName" :align="'center'" />
                        <a-table-column title="操作" :align="'center'">
                            <template slot-scope="record">
                                <a href="javascript:void(0);" @click="deleteUser(record['id'])">删除</a>
                            </template>
                        </a-table-column>
                    </template>

                    <!-- 抽屉 -->
                    <ant-drawer route-name="sysUserManage" />
                </ant-standard-table>
            </a-layout-content>
        </a-layout>
    </a-card>
</template>

<script>
    import AntDrawer from '../../components/drawer/AntDrawer';
    import AntStandardTable from '../../components/table/AntStandardTable';
    import SysDeptManage from './SysDeptManage';
    import { pagingQuerySysUser,deleteSysUser } from '../../apis/upms';
    export default {
        components : { AntDrawer,AntStandardTable,SysDeptManage },
        methods : {
            /**
             * 分页查询用户信息
             */
            pagingQuerySysUser,

            deleteUser : function (userId) {
                let $this = this;
                $this.$modal.confirm({
                    title : '确认删除',
                    onOk : () => {
                        deleteSysUser(userId).then(() => {
                            let query = $this.$route.query;
                            const params = Object.assign({}, query,{ reload : new Date().getTime() });
                            $this.$router.push({ name : $this.$route.name, query : params }).then();
                        });
                    }
                });
            }
        }
    }
</script>
